<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="listQuery.companyId" placeholder="企业名称" clearable class="filter-item">
        <el-option
          v-for="item in enterpriseList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-select
        v-model="listQuery.dangerLevel"
        placeholder="隐患级别"
        clearable
        style="width:130px"
        class="filter-item"
      >
        <el-option
          v-for="item in troubleGrades"
          :key="item.id"
          :label="item.dictValue"
          :value="item.id"
        />
      </el-select>
      <el-select
        v-model="listQuery.dangerRecitfyType"
        placeholder="整改类型"
        clearable
        class="filter-item"
        style="width: 130px"
      >
        <el-option
          v-for="item in troubleRectifyTypes"
          :key="item.id"
          :label="item.dictValue"
          :value="item.id"
        />
      </el-select>
      <!-- <el-date-picker
        v-model="listQuery.discoverDate"
        type="date"
        value-format="yyyy/MM/dd"
        placeholder="发现时间"
        class="filter-item"
      ></el-date-picker>-->
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
      height="400"
    >
      <el-table-column align="center" label="编号" width="60" prop="id"></el-table-column>

      <el-table-column min-width="250px" align="center" label="隐患名称" prop="dangerName"></el-table-column>
      <el-table-column min-width="200px" align="center" label="所属单位" prop="companyName"></el-table-column>

      <el-table-column min-width="100px" align="center" label="隐患级别">
        <template slot-scope="{row}">{{row.dangerLevel|levelFilter}}</template>
      </el-table-column>

      <el-table-column min-width="100px" align="center" label="整改类型">
        <template slot-scope="{row}">{{row.dangerRecitfyType|typeFilter}}</template>
      </el-table-column>
      <el-table-column min-width="100px" align="center" label="隐患状态">
        <template slot-scope="{row}">{{row.dangerState|stateFilter}}</template>
      </el-table-column>

      <el-table-column class-name="status-col" label="发布时间" min-width="100px" prop="createTime"></el-table-column>
      <el-table-column
        class-name="status-col"
        label="整改限期"
        min-xwidth="100px"
        prop="recitfyOverdate"
      ></el-table-column>

      <el-table-column align="center" label="操作" width="150px" fixed="right">
        <template slot-scope="scope">
          <router-link
            :to="'troubleRecitfy/'+scope.row.id"
            v-if="scope.row.dangerState==3||scope.row.dangerState==5"
          >
            <el-button type="primary" size="small" icon="el-icon-edit">整改</el-button>
          </router-link>

          <el-button
            size="small"
            icon="el-icon-view"
            @click="watchTrouble(scope.row.id,scope.row.dangerState,scope.row.companySafetyOfficerName)"
            v-else-if="scope.row.dangerState==2"
          >接受整改</el-button>
          <el-button
            size="small"
            icon="el-icon-view"
            @click="watchTrouble(scope.row.id,scope.row.dangerState,scope.row.companySafetyOfficerName)"
            v-else
          >查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.pageIndex"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
    <el-dialog :visible.sync="dialogVisible">
      <el-form label-width="120px" label-position="left">
        <el-form-item label="隐患责任人">
          <el-input v-model="liablePerson" placeholder="请输入隐患责任人" />
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmLiablePerson()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//状态 1:草稿, 2:已通知(企业可查),3:整改中,4:待复查,5:复查不通过,6:已消除,-1:作废
import { fetchList, takeTrouble } from '@/api/troubles'
import { fetchEnterpriseListByUser } from '@/api/enterprise'
import { getBaseDicInfo } from '@/api/baseApi'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
let that
export default {
  name: 'EnterpriseTrouble',
  components: { Pagination },
  data() {
    return {
      liableId: '',
      liablePerson: '',
      dialogVisible: false,
      list: null,
      total: 0,
      listLoading: true,
      enterpriseList: [],
      troubleGrades: [], //隐患级别
      troubleRectifyTypes: [], //整改类型
      listQuery: {
        pageIndex: 1,
        limit: 10,
        companyId: '',
        dangerName: '',
        dangerLevel: '',
        dangerRecitfyType: '',
        recitfyOverdate: null,
        dangerState: '',
        pType: 1
      }
    }
  },
  beforeCreate: function() {
    that = this
  },
  created() {
    this.getList()
    this.getTroubleGradesList()
    this.getRectifyTypeList()
    this.getEnterpriseList()
  },
  filters: {
    stateFilter(state) {
      const stateMap = {
        1: '草稿',
        2: '待整改',
        3: '整改中', //可以显示草稿，可以整改
        4: '待复查', //不可填写整改
        5: '复查不通过', //可以显示草稿，可以整改
        6: '已消除'
        // '-1': '作废'
      }
      return stateMap[state]
    },
    typeFilter(typeId) {
      let result = ''
      that.troubleRectifyTypes.map((type) => {
        if (type.id == typeId) {
          result = type.dictValue
        }
      })
      return result
    },
    levelFilter(levelId) {
      let result = ''
      that.troubleGrades.map((level) => {
        if (level.id == levelId) {
          result = level.dictValue
        }
      })
      return result
    }
  },
  methods: {
    getEnterpriseList() {
      fetchEnterpriseListByUser().then((response) => {
        this.enterpriseList = response.data
      })
    },
    getTroubleGradesList() {
      getBaseDicInfo({ typeId: 2 }).then((response) => {
        this.troubleGrades = response.data
      })
    },
    getRectifyTypeList() {
      getBaseDicInfo({ typeId: 1 }).then((response) => {
        this.troubleRectifyTypes = response.data
      })
    },
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then((response) => {
        this.list = response.data.records
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.getList()
    },
    watchTrouble(dangerId, dangerState, companySafetyOfficerName) {
      if (dangerState == 2) {
        //如果是待整改，弹出确认整改框
        this.dialogVisible = true
        this.liableId = dangerId
        this.liablePerson = companySafetyOfficerName
      } else {
        this.$router.push('troubleRecitfy/' + dangerId)
      }
    },
    confirmLiablePerson() {
      //确定隐患责任人
      takeTrouble({
        dangerId: this.liableId,
        liablePerson: this.liablePerson
      }).then((res) => {
        if (res.success) {
          this.$router.push('troubleRecitfy/' + this.liableId)
          this.$notify({
            title: '成功',
            message: '确认隐患成功',
            type: 'success',
            duration: 2000
          })
          this.getList()
          this.dialogVisible = false
        } else {
          this.$notify({
            title: '失败',
            message: '确认隐患失败',
            type: 'error',
            duration: 2000
          })
        }
      })
    }
  }
}
</script>

<style scoped  lang="scss" >
.app-container /deep/ .pagination-container {
  margin-top: 0;
  padding: 16px 16px;
}
@import '~@/styles/mixin.scss';
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.createPost-container {
  position: relative;

  .createPost-main-container {
    padding: 40px 45px 20px 50px;

    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .postInfo-container-item {
        float: left;
      }
    }
  }

  .word-counter {
    width: 40px;
    position: absolute;
    right: 10px;
    top: 0px;
  }
}

.searchBar {
  margin-bottom: 10px;
}
</style>

